<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<view class="album">
					<view class="album__avatar">
						<image src="/static/msg/nsg.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view class="album__content">
						<up-text :text="msg.title" type="primary" bold size="17"></up-text>
						<up-text margin="0 0 6px 0" color="#909399" :text="msg.createTime"></up-text>
						<up-text margin="0 0 8px 0" :text="msg.content"></up-text>
						<up-album :urls="urls1"></up-album>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { BASE_IP } from '@/common/http/url.js';

	export default {
		data() {
			return {
				msg: {}, // 初始化为对象
				urls1: [] // 初始化为数组
			};
		},
		onLoad(options) {
			let id = options.id;
			console.log("获取id：", id);
			this.getMsg(id);
		},
		methods: {
			getMsg(id) {
				let url = `${BASE_IP}pc/msg/${id}`;
				let user = uni.getStorageSync("user");

				uni.request({
					method: "GET",
					header: {
						Authorization: user.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							this.msg = res.data;

							if (res.data.type === 1) {
								try {
									let urls = JSON.parse(res.data.data);

									// 扩展正则表达式以支持多种图片格式
									const isImage = (file) => /\.(jpg|jpeg|png|gif)$/i.test(file);

									// 构造完整的图片 URL 数组
									this.urls1 = urls
										.filter(isImage)
										.map((file) => `${BASE_IP}${file.replace(/^\//, '')}`); // 去除多余的斜杠
								} catch (error) {
									console.error("解析图片路径失败：", error);
								}
							}
						} else {
							// 处理非 200 状态码
							console.error("请求失败，状态码：", res.statusCode);
						}
					},
					fail: (err) => {
						// 请求失败时的处理
						console.error("网络请求失败：", err);
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	.u-demo-block {
		width: 95%;
		height: auto;
		margin: 0 auto;
		padding-top: 30rpx;
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>